<template>
	<div
		@click="handleDetail"
		class="group relative block break-inside-avoid-column overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300"
	>
		<!-- 
      优化1: 宽高比容器
      - 使用 `aspect-ratio` 根据图片真实比例预占空间，彻底解决布局抖动。
      - 添加背景色作为图片加载时的占位符。
    -->
		<div
			class="w-full bg-gray-200 dark:bg-zinc-700"
			:style="{ aspectRatio: `${item.photoWidth} / ${item.photoHeight}` }"
		>
			<!-- 
        优化2: 图片平滑加载
        - 图片绝对定位，充满其父容器（宽高比容器）。
        - 通过 isLoaded 状态和 CSS transition 实现优雅的淡入效果。
        需要注意的点： h-auto 会导致图片加载时会导致页面布局抖动
        不能使用h-auto 属性
        提前使用宽高比预留占位空间 降低重排
      -->
			<img
				:src="item.photo"
				:alt="item.title || 'Image from Pexels'"
				class="absolute inset-0 w-full h-full object-cover transition-opacity duration-500"
				:class="isLoaded ? 'opacity-100' : 'opacity-0'"
				loading="lazy"
				@load="onImageLoad"
			/>
		</div>

		<!-- 悬浮遮罩 (这部分逻辑不变，但现在它位于 <a> 标签内) -->
		<div
			class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300 flex flex-col justify-end p-4 text-white"
		>
			<div
				class="transform translate-y-1/2 group-hover:translate-y-0 transition-transform duration-300"
			>
				<div class="font-bold truncate">
					{{ item.title || "Untitled" }}
				</div>
				<p class="text-sm text-gray-300">by {{ item.author }}</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

import type { PexelsItem } from "@/types/index.js";
import { useSearchPexelsStore } from "@/store/modules/search_pexels";

const router = useRouter();

const searchPexelsStore = useSearchPexelsStore();

const handleDetail = () => {
	searchPexelsStore.setItemDeatil(props.item);
	router.push({
		name: "PexelsDetail",
		query: {
			type: "search",
		},
	});
};

const props = defineProps<{ item: PexelsItem }>();

// 优化2: 创建一个响应式状态来跟踪图片是否加载完成
const isLoaded = ref(false);

const onImageLoad = () => {
	isLoaded.value = true;
};
</script>
